<template>
    <div class="list">
        <div class="item-list" v-for="(item,index) in list" :key="index">
            <div class="item-title">
              <span class="item-icon"></span>
               {{item.title}}
            </div>
            <div v-if="item.children" class="item-chilren">
              <list :list="item.children"></list>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "list",
        props:{
          list:{
            type:Array,
            default:[]
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/minxies.styl"
   .item-title
      position relative
      line-height 32px;
      font-size 16px
      padding:0 10px 0 30px
      bottom-border-1px(#e4e4e4)
      .item-icon
        display: inline-block;
        position: absolute;
        width: 18px;
        height: 18px;
        top: 6px;
        left: 13px;
        background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) no-repeat 0 3px;
        margin-right: 5px;
        background-size: 100% ;
   .item-chilren
     margin:0 10px
</style>
